<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <!--    导入vue-->
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  <!--    ajax异步请求-->
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <!--  产品名称 模糊查询-->
  <input type="button" @click="doSearch" value="搜索">
  <br/>
  <div v-for="(goods,index) in goodsInfoList">
    商品编号={{ goods.goodsid }}&nbsp;
    商品名称 = {{ goods.goodsname }} &nbsp;
    商品类型 = {{ goods.typename }}&nbsp; &nbsp;
    商品价格 = {{ goods.price }}&nbsp;
    <button v-if="goods.status === 2" >上架</button>&nbsp;
    <button v-if="goods.status === 1" >下架</button>&nbsp;
  </div>

</div>
<script>
  //vue数据模型
  const app = {
    data() {
      return {
        urlPrefix: "/mvc",//TODO
        //列表
        goodsInfoList: [
          {
            goodsid: 1,
            goodsname: "红糖",
            goodstype: 1,
            typename: "食品",
            price: 100,
            createtime: "2023-04-13 15:22:36",
            status: 1, //上下架状态 1上架  2下架
          },
          {
            goodsid: 2,
            goodsname: "红糖2",
            goodstype: 1,
            typename: "食品2",
            price: 100,
            createtime: "2023-04-13 15:22:36",
            status: 2, //上下架状态 1上架  2下架
          }
        ],
      }
    },
    //事件方法
    methods: {
      doSearch() {
        //获取数据
        this.getData();
      },
      getData() {
        //从服务器获取数据
        axios.get(this.urlPrefix + "/goods/getGoodsInfoList")
            .then((response) => {
              let result = response.data;
              if (result.code === 200) {
                this.goodsInfoList = result.map.list;
              } else {
                //输出提示消息
                alert(result.msg);
              }
            })
            .catch((error) => { // 请求失败处理 非200响应码
              // alert(JSON.stringify(error));
              alert(error.response.data.msg);
            });
      },
      //删除
      del(id) {
        //调用接口删除数据
        axios.post(this.urlPrefix + "/product/deleteById", {
          id: id
        })
            .then((response) => {//http响应码为200会进到这里
              //response.data 为result  , result有map属性, page为map的key
              let result = response.data;
              if (result.code === 200) {
                //输出提示消息
                alert(result.msg);
                //刷新数据
                this.getData();
              }
            })
            .catch((error) => { // 请求失败处理 非200响应码
              // alert(JSON.stringify(error));
              alert(error.response.data.msg);
            });
      }
    }
  }
  //创建一个vue管理的数据模型  绑定html模板视图
  Vue.createApp(app).mount('#app')
</script>

</body>
</html>